<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="在线设备" name="first">
            <el-scrollbar   height="400px">
                <div v-if="allDevices.data.length === 0" style="height: 150px; color: white;">
                    <div class="image">暂无历史设备</div>
                </div>
                <div v-else v-for="(item, index) in 1" class="historyDev">
                    <history-dev  :devData=allDevices.data[0]></history-dev>
                </div>
            </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="历史设备"  name="second">
            <el-scrollbar   height="400px">
                <div v-if="allDevices.data.length === 0" style="height: 150px; color: white;">
                    <div class="image">暂无历史设备</div>
                </div>
                <div v-else v-for="(item, index) in allDevices.data" :key="item.deviceSn" class="historyDev">
                    <history-dev v-if="!item.notOnline" :devData=item></history-dev>
                </div>
            </el-scrollbar>

        </el-tab-pane>

    </el-tabs>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, reactive, computed } from 'vue'
// import type { TabsPaneContext } from 'element-plus'
import { getDeviceTopo, getUnreadDeviceHms, updateDeviceHms } from '@/api/manage'
import { EDeviceTypeName, ELocalStorageKey } from '@/types'

import { AllDevice, EModeCode, OSDVisible, EDockModeCode, DeviceOsd } from '@/types/device'
import { EHmsLevel } from '@/types/enums'
import HistoryDev from '@/components/GroupMap/Starview/historyDev.vue'


// const hmsVisible = new Map<string, boolean>()

// const osdVisible = computed(() => flysta.osdVisible)
// const deviceInfo = computed(() => flysta.deviceState.deviceInfo)
// const dockInfo = computed(() => flysta.deviceState.dockInfo)
// const hmsInfo = computed({
//     get: () => flysta.hmsInfo,
//     set: (val) => {
//         return val
//     }
// })

const workspaceId = ref(localStorage.getItem(ELocalStorageKey.WorkspaceId)!)

const activeName = ref('first')


const allDevices = reactive({
    data: [] as AllDevice[]
})

onMounted(() => {
    getOnlineTopo()
    //   setTimeout(() => {
    //     watch(() => store.state.deviceStatusEvent,
    //       data => {
    //         getOnlineTopo()
    //         if (data.deviceOnline.sn) {
    //           getUnreadHms(data.deviceOnline.sn)
    //         }
    //       },
    //       {
    //         deep: true
    //       }
    //     )
    //     getOnlineDeviceHms()
    //   }, 3000)
    //   const element = document.getElementsByClassName('scrollbar').item(0) as HTMLDivElement
    //   const parent = element?.parentNode as HTMLDivElement
    //   scorllHeight.value = parent?.clientHeight - parent?.firstElementChild?.clientHeight
})

function getOnlineTopo() {
    getDeviceTopo(workspaceId.value).then((res) => {
        if (res.code !== 0) {
            return
        }

        allDevices.data = res.data

    })

}
// const handleClick = (tab: TabsPaneContext, event: Event) => {
//   console.log(tab, event)
// }
</script>
<style  lang='scss'>
.el-tabs__nav-scroll {
    padding: 0 25%;
}

.image {
    height: 200px;
    width: 200px;
    background-image: url('../../assets/image/no-data.png');
    background-size: 100% 100%;
}

.historyDev {
    
}
    
.emo-tabs {
    font-family: 600;
}
</style >
